<template>
    <el-row>
        <el-col
            :xs="24"
            :sm="24"
            :md="8"
            :lg="8"
            :xl="6"
            class="input"
        >
            <el-input
                class="text"
                v-model="text"
                placeholder="请输入发病对象"
            >
                <template #prepend>
                    请输入发病对象
                </template>
                <template #append>
                    <el-button @click="textSubmit">提交</el-button>
                </template>
            </el-input>
        </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
        <el-col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="12"
            class="article"
            element-loading-background="rgba(255, 255, 255, 0)"
            v-loading="articleLoading"
        >
            <el-row>
                <h3> {{ articleTitle }}</h3>
            </el-row>
            <el-row>
                <p> {{ articleContent }}</p>
            </el-row>
        </el-col>
    </el-row>
</template>

<script>
import axios from 'axios'
export default {
    name: "index-content",
    data() {
        return {
            articleLoading:false,
            text:"",
            articleTitle:"生成标题",
            articleContent:"生成文章内容"
        }
    },
    methods:{
        textSubmit() {
            this.articleLoading = true;
            axios.post("http://localhost:8089/api/synthesisEssay").then((data) => {
                this.articleLoading = false;
                this.articleTitle = data["data"]["data"]["title"];
                this.articleContent = data["data"]["data"]["content"];
            });
        }
    }
}
</script>

<style scoped>
    .input,.article {
        margin: 0 auto;
    }
    h3,p {
        margin: 0 auto;
    }
    p {
        text-indent: 2em;
    }
</style>
